<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="../../../css/mdb.min.css" rel="stylesheet">



    <style>
        /* TEMPLATE STYLES */
        
        html,
        body,
        header,
        .view {
            height: 100%;
        }
        /* Navigation*/
        
        .navbar {
            background-color: transparent;
        }
        
        .top-nav-collapse {
            background-color: #455A64; 
        }
        
        @media only screen and (max-width: 768px) {
            .navbar {
                background-color: #0A6A60;
            }
        }
        
        .full-bg-img {
            color: #fff;
        }
        
        .view {
            background: url("http://mdbootstrap.com/images/regular/people/img%20(63).jpg")no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        footer.page-footer {
            background-color: #7E929C;
        }
    </style>

</head>

<body>

    <!--Navigation & Intro-->
    <header>

        <!--Navbar-->
        <nav class="navbar navbar-dark navbar-fixed-top scrolling-navbar">

            <!-- Collapse button-->
            <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
            <i class="fa fa-bars"></i></button>

            <div class="container">

                <!--Collapse content-->
                <div class="collapse navbar-toggleable-xs" id="collapseEx">
                    <!--Navbar Brand-->
                    <a class="navbar-brand" href="http://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
                    <!--Links-->
                    <ul class="nav navbar-nav smooth-scroll">
                        <li class="nav-item">
                            <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#best-features">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#examples-of-use">Examples</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#testimonials">Testimonials</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#pricing">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#our-team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>

                    <!--Navbar icons-->
                    <ul class="nav navbar-nav nav-flex-icons">
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.2s">
                            <a class="nav-link"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.3s">
                            <a class="nav-link"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.4s">
                            <a class="nav-link"><i class="fa fa-instagram"></i></a>
                        </li>
                    </ul>

                </div>
                <!--/.Collapse content-->

            </div>

        </nav>
        <!--/.Navbar-->

        <!--Mask-->
        <div class="view hm-black-strong">
            <div class="full-bg-img flex-center" id="home">
                <ul>
                    <li>
                        <h1 class="h1-responsive wow fadeInUp">Our New Course is Ready</h1></li>
                    <li>
                        <p class="wow fadeInUp" data-wow-delay="0.2s">It comes with a lot of new features, easy to follow videos and images. Check it out now!</p>
                    </li>
                    <li>
                        <a class="btn btn-outline-white btn-lg wow fadeInLeft" data-wow-delay="0.2s"><i class="fa fa-user left"></i> Sign up!</a>
                        <a class="btn btn-outline-white btn-lg wow fadeInRight" data-wow-delay="0.2s"><i class="fa fa-book left"></i>Learn more</a>
                    </li>
                </ul>
            </div>
        </div>
        <!--/.Mask-->

    </header>
    <!--/Navigation & Intro-->
    
    <!--Main layout-->
    <main>
        <div class="container">
        
        <!--Projects section v.4-->
        <section class="section extra-margins" id="examples-of-use">

            <!--Section heading-->
            <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our best projects</h1>
            <!--Section description-->
            <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

            <!--First row-->
            <div class="row">

                <!--First column-->
                <div class="col-md-6 mb-r wow fadeInDown">
                    <!--Image-->
                    <img src="http://mdbootstrap.com/images/regular/people/img%20(65).jpg" alt="" class="img-fluid z-depth-2">
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-5 offset-md-1">
                    <!--First row-->
                    <div class="row wow fadeInRight" data-wow-delay="0.2s">
                        <div class="col-xs-1 mr-1">
                            <i class="fa fa-bank fa-2x cyan-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Safety</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                        </div>
                    </div>
                    <!--/First row-->

                    <div style="height:20px"></div>

                    <!--Second row-->
                    <div class="row wow fadeInRight" data-wow-delay="0.3s">
                        <div class="col-xs-1 mr-1">
                            <i class="fa fa-code fa-2x indigo-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Technology</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                        </div>
                    </div>
                    <!--/Second row-->

                    <div style="height:20px"></div>

                    <!--Third row-->
                    <div class="row wow fadeInRight" data-wow-delay="0.4s">
                        <div class="col-xs-1 mr-1">
                            <i class="fa fa-money fa-2x blue-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Finance</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                        </div>
                    </div>
                    <!--/Third row-->

                </div>
                <!--/Second column-->

            </div>
            <!--/First row-->

            <div style="height:70px">
                <hr class="hidden-md-up">
            </div>

            <!--Second row-->
            <div class="row">

                <!--First column-->
                <div class="col-md-5 mb-r">

                    <!--First row-->
                    <div class="row wow fadeInLeft" data-wow-delay="0.2s">
                        <div class="col-xs-1 m-r-1">
                            <i class="fa fa-eye fa-2x light-green-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Followers</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                        </div>
                    </div>
                    <!--/First row-->

                    <div style="height:20px"></div>

                    <!--Second row-->
                    <div class="row wow fadeInLeft" data-wow-delay="0.3s">
                        <div class="col-xs-1 mr-1">
                            <i class="fa fa-heart-o fa-2x pink-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Entertainment</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                        </div>
                    </div>
                    <!--/Second row-->

                    <div style="height:20px"></div>

                    <!--Third row-->
                    <div class="row wow fadeInLeft" data-wow-delay="0.4s">
                        <div class="col-xs-1 mr-1">
                            <i class="fa fa-smile-o fa-2x amber-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Communication</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                        </div>
                    </div>
                    <!--/Third row-->

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-6 offset-md-1 mb-2 wow fadeInUp">
                    <img src="http://mdbootstrap.com/images/regular/people/img%20(61).jpg" alt="" class="img-fluid z-depth-2">
                </div>
                <!--/Second column-->

            </div>
            <!--/First row-->

        </section>
        <!--/Projects section v.4-->
        
        <hr class="between-sections">

        <!--Section: Features v.1-->
        <section class="section feature-box" id="best-features">

            <!--Section heading-->
            <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
            <!--Section description-->
            <p class="section-description lead wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

            <!--First row-->
            <div class="row features-big">
                <!--First column-->
                <div class="col-md-4 mb-r wow zoomIn">
                    <i class="fa fa-area-chart blue-text"></i>
                    <h4 class="feature-title">Analytics</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-4 mb-r wow zoomIn">
                    <i class="fa fa-book green-text"></i>
                    <h4 class="feature-title">Tutorials</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-md-4 mb-r wow zoomIn">
                    <i class="fa fa-coffee red-text"></i>
                    <h4 class="feature-title">Relax</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
                <!--/Third column-->
            </div>
            <!--/First row-->

        </section>
        <!--/Section: Features v.1-->

        <hr class="between-sections">
        
        <!--Section: Testimonials v.3-->
        <section class="section team-section" id="testimonials">

            <!--Section heading-->
            <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Testimonials</h1>
            <!--Section description-->
            <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

            <!--First row-->
            <div class="row text-xs-center">

                <!--First column-->
                <div class="col-md-4 mb-r wow fadeInUp">
                   
                    <div class="testimonial">
                       <!--Avatar-->
                        <div class="avatar">
                            <img src="http://mdbootstrap.com/images/avatars/img%20(1).jpg" class="rounded-circle img-fluid">
                        </div>
                        
                        <!--Content-->
                        <h4>Anna Deynah</h4>
                        <h5>Web Designer</h5>
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>

                        <!--Review-->
                        <div class="orange-text">
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star-half-full"> </i>
                        </div>
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.2s">
                    <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar">
                            <img src="http://mdbootstrap.com/images/avatars/img%20(3).jpg" class="rounded-circle img-fluid">
                        </div>

                        <!--Content-->
                        <h4>John Doe</h4>
                        <h5>Web Developer</h5>
                        <p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>

                        <!--Review-->
                        <div class="orange-text">
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                        </div>
                    </div>
                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-md-4 mb-r wow fadeInUp" data-wow-delay="0.4s">
                    <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar">
                            <img src="http://mdbootstrap.com/images/avatars/img%20(2).jpg" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4>Maria Kate</h4>
                        <h5>Photographer</h5>
                        <p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>

                        <!--Review-->
                        <div class="orange-text">
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star"> </i>
                            <i class="fa fa-star-o"> </i>
                        </div>

                    </div>
                </div>
                <!--/Third column-->
                
            </div>
            <!--/First row-->

        </section>
        <!--/Section: Testimonials v.3-->
        
        <hr class="between-sections">
        
        <!--Section: Pricing v.2-->
        <section class="section" id="pricing">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our pricing plans</h1>
                <!--Section description-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <!--First row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-lg-4 col-md-6 mb-r wow fadeInRight">

                        <!--Pricing card-->
                        <div class="card-overlay pricing-card" style="background-image: url('http://mdbootstrap.com/images/regular/dark/img%20(7).jpg')">

                            <!--Content-->
                            <div class="white-text text-xs-center">
                                <div class="card-block">
                                    <h5>Basic</h5>
                                    <!--Price-->
                                    <div class="price">
                                        <h1>10</h1>
                                    </div>
                                    <!--/.Price-->
                                    <ul class="striped">
                                        <li>
                                            <p><strong>1</strong> project</p>
                                        </li>
                                        <li>
                                            <p><strong>100</strong> components</p>
                                        </li>
                                        <li>
                                            <p><strong>150</strong> features</p>
                                        </li>
                                        <li>
                                            <p><strong>200</strong> members</p>
                                        </li>
                                        <li>
                                            <p><strong>250</strong> messages</p>
                                        </li>
                                    </ul>
                                    <a class="btn btn-lg btn-white-outline"> Buy now</a>
                                </div>
                            </div>


                        </div>
                        <!--/.Pricing card-->

                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-lg-4 col-md-6 mb-r wow fadeInRight" data-wow-delay="0.2s">

                        <!--Pricing card-->
                        <div class="card-overlay pricing-card" style="background-image: url('http://mdbootstrap.com/images/regular/dark/img%20(8).jpg')">

                            <!--Content-->
                            <div class="white-text text-xs-center">
                                <div class="card-block">
                                    <h5>Pro</h5>
                                    <!--Price-->
                                    <div class="price">
                                        <h1>20</h1>
                                    </div>
                                    <!--/.Price-->
                                    <ul class="striped">
                                        <li>
                                            <p><strong>3</strong> projects</p>
                                        </li>
                                        <li>
                                            <p><strong>200</strong> components</p>
                                        </li>
                                        <li>
                                            <p><strong>250</strong> features</p>
                                        </li>
                                        <li>
                                            <p><strong>300</strong> members</p>
                                        </li>
                                        <li>
                                            <p><strong>350</strong> messages</p>
                                        </li>
                                    </ul>
                                    <a class="btn btn-lg btn-white-outline"> Buy now</a>
                                </div>
                            </div>

                        </div>
                        <!--/.Pricing card-->

                    </div>
                    <!--/Second column-->

                    <!--Third column-->
                    <div class="col-lg-4 col-md-6 mb-r wow fadeInRight" data-wow-delay="0.4s">
                        <!--Pricing card-->
                        <div class="card-overlay pricing-card" style="background-image: url('http://mdbootstrap.com/images/regular/dark/img%20(9).jpg')">

                            <!--Content-->
                            <div class="text-xs-center">
                                <div class="card-block">
                                    <h5>Enterprise</h5>
                                    <!--Price-->
                                    <div class="price">
                                        <h1>30</h1>
                                    </div>
                                    <!--/.Price-->
                                    <ul class="striped">
                                        <li>
                                            <p><strong>5</strong> projects</p>
                                        </li>
                                        <li>
                                            <p><strong>300</strong> components</p>
                                        </li>
                                        <li>
                                            <p><strong>350</strong> features</p>
                                        </li>
                                        <li>
                                            <p><strong>400</strong> members</p>
                                        </li>
                                        <li>
                                            <p><strong>450</strong> messages</p>
                                        </li>
                                    </ul>
                                    <a class="btn btn-lg btn-white-outline"> Buy now</a>
                                </div>
                            </div>


                        </div>
                        <!--/.Pricing card-->
                    </div>
                    <!--/Third column-->

                </div>
                <!--/First row-->

</section>
        <!--/Section: Pricing v.2-->

        <hr class="between-sections">
        
        <!--Section: Team v.3-->
        <section class="section team-section" id="our-team"> 

            <!--Section heading-->
            <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Meet our amazing team</h1>
            <!--Section description-->
            <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

            <!--First row-->
            <div class="row">

                <!--First column-->
                <div class="col-md-6 mb-r wow fadeIn" data-wow-delay="0.3s">
                   
                    <div class="col-md-6">
                        <img src="http://mdbootstrap.com/images/avatars/img%20(9).jpg">
                    </div>

                    <div class="col-md-6">
                        <h4>John Doe</h4>
                        <h5>Web Developer</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>

                        <!--Facebook-->
                        <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
                        <!--Twitter-->
                        <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
                        <!--GitHub-->
                        <a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
                    </div>

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-6 mb-r wow fadeIn" data-wow-delay="0.4s">
                   
                    <div class="col-md-6">
                        <img src="http://mdbootstrap.com/images/avatars/img%20(10).jpg">
                    </div>

                    <div class="col-md-6">
                        <h4>Maria Kate</h4>
                        <h5>Photographer</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>

                        <!--Facebook-->
                        <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
                        <!--Pinterest-->
                        <a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a>
                        <!--Instagram-->
                        <a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>
                    </div>
                    
                </div>
                <!--/Second column-->

            </div>
            <!--/First row-->

            <div style="height:50px" class="hidden-md-down"></div>

            <!--Second row-->
            <div class="row">

                <!--Third column-->
                <div class="col-md-6 mb-r wow fadeIn" data-wow-delay="0.6s">

                    <div class="col-md-6">
                        <img src="http://mdbootstrap.com/images/avatars/img%20(11).jpg">
                    </div>

                    <div class="col-md-6">
                        <h4>Anna Deynah</h4>
                        <h5>Web Designer</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>

                        <!--Facebook-->
                        <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
                        <!--Twitter-->
                        <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
                        <!--Dribbble-->
                        <a class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a>
                    </div>


                </div>
                <!--/Third column-->

                <!--Fourth column-->
                <div class="col-md-6 mb-r wow fadeIn" data-wow-delay="0.5s">
                   
                    <div class="col-md-6">
                        <img src="http://mdbootstrap.com/images/avatars/img%20(1).jpg">
                    </div>

                    <div class="col-md-6">
                        <h4>Sarah Melyah</h4>
                        <h5>Front-end Developer</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>

                        <!--Google +-->
                        <a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
                        <!--Facebook-->
                        <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
                        <!--GitHub-->
                        <a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>

                    </div>

                </div>
                <!--/Fourth column-->
            </div>
            <!--/Second row-->

        </section>
        <!--/Section: Team v.3-->
        
        <hr class="between-sections">

        <!--Section: Contact v.2-->
        <section class="section" id="contact">

            <!--Section heading-->
            <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Contact</h1>
            <!--Section description-->
            <p class="section-description mb-5 wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

            <div class="row wow zoomIn" data-wow-delay="0.4s">

                <!--First column-->
                <div class="col-md-8">
                    <form>
                        <!--First row-->
                        <div class="row">
                            <!--First column-->
                            <div class="col-md-6">
                                <div class="md-form">
                                    <div class="md-form">
                                        <input type="text" id="form41" class="form-control">
                                        <label for="form41" class="">Your name</label>
                                    </div>
                                </div>
                            </div>

                            <!--Second column-->
                            <div class="col-md-6">
                                <div class="md-form">
                                    <div class="md-form">
                                        <input type="text" id="form52" class="form-control">
                                        <label for="form52" class="">Your email</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.First row-->

                        <!--Second row-->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form">
                                    <input type="text" id="form51" class="form-control">
                                    <label for="form51" class="">Subject</label>
                                </div>
                            </div>
                        </div>
                        <!--/Second row-->

                        <!--Third row-->
                        <div class="row">
                            <!--First column-->
                            <div class="col-md-12">

                                <div class="md-form">
                                    <textarea type="text" id="form76" class="md-textarea"></textarea>
                                    <label for="form76">Your message</label>
                                </div>

                            </div>
                        </div>
                        <!--/.Third row-->
                    </form>

                    <div class="center-on-small-only">
                        <a class="btn btn-email">Send</a>
                    </div>
                </div>
                <!--.First column-->

                <!--Second column-->
                <div class="col-md-4">
                    <ul class="contact-icons">
                        <li><i class="fa fa-map-marker fa-2x"></i>
                            <p>New York, NY 10012, USA</p>
                        </li>

                        <li><i class="fa fa-phone fa-2x"></i>
                            <p>+ 01 234 567 89</p>
                        </li>

                        <li><i class="fa fa-envelope fa-2x"></i>
                            <p>contact@mdbootstrap.com</p>
                        </li>
                    </ul>
                </div>
                <!--.Second column-->

            </div>
        </section>
        <!--/Section: Contact v.2-->

        </div>
    </main>
    <!--/Main layout-->
    
    
<!--Footer-->
<footer class="page-footer center-on-small-only">

    <!--Footer Links-->
    <div class="container-fluid">
        <div class="row">

            <!--First column-->
            <div class="col-md-3 offset-md-1">
                <h5 class="title">ABOUT MATERIAL DESIGN</h5>
                    <br>
                    <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>

                    <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
            </div>
            <!--/.First column-->

            <hr class="hidden-md-up">

            <!--Second column-->
            <div class="col-md-2 offset-md-1">
                <h5 class="title">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Second column-->

            <hr class="hidden-md-up">

            <!--Third column-->
            <div class="col-md-2">
                <h5 class="title">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Third column-->

            <hr class="hidden-md-up">

            <!--Fourth column-->
            <div class="col-md-2">
                <h5 class="title">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Fourth column-->

        </div>
    </div>
    <!--/.Footer Links-->

    <hr>

    <!--Call to action-->
    <div class="call-to-action">
        <ul>
            <li>
                <h5>Register for free</h5></li>
            <li><a href="" class="btn btn-danger">Sign up!</a></li>
        </ul>
    </div>
    <!--/.Call to action-->

    <hr>

    <!--Social buttons-->
    <div class="social-section">
        <ul>
            <li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
            <li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
            <li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
            <li><a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
            <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
            <li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
            <li><a href="https://www.instagram.com/mdbootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
        </ul>
    </div>
    <!--/.Social buttons-->

    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid">
            © 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>

        </div>
    </div>
    <!--/.Copyright-->

</footer>
<!--/.Footer-->

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>

    <!-- Tooltips -->
    <script type="text/javascript" src="../../../js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="../../../js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="../../../js/mdb.min.js"></script>

    <script>
        new WOW().init();
    </script>


</body>

</html>